<template>
  <el-checkbox v-if="!row.children" :model-value="on(row)" @click="onclick(row)" :size="size">{{ row.content }}</el-checkbox>
  <template v-else >
    <h3>
      <el-checkbox @click="onclick_all" :model-value="!!allon" :indeterminate="allon==2" :size="size">
        <p @click.stop="change_expand">{{ row.content }}</p>
      </el-checkbox>
    </h3>
    <div class="checkbox-group" v-show="row.expand">
      <checkbox_loop v-for="v in row.children" :value="value" :size="size" @change="$emit('change',$event)" @update:value="$emit('update:value',$event)" :row="v"></checkbox_loop>
    </div>
  </template>
</template>

<script>
import s94Mjs from "s94-js";

export default {
  name: "checkbox_loop",
  props: ['row', 'value', 'is_info', 'size', 'is_list'],
  emits: ['update:value','change'],
  methods: {
    on(row){
      let value_arr = this.value_arr();
      return !!~value_arr.indexOf(row.value+'');
    },
    value_arr(){
      let value = s94Mjs.trim(s94Mjs.to_string(this.value), ',');
      return value ? value.split(',') : [];
    },
    onclick(row){
      let value = row.value+'';
      let value_arr = this.value_arr();
      let index = value_arr.indexOf(value);
      if( index != -1 ){
        value_arr.splice(index ,1);
      }else{
        value_arr.push(value);
      }
      this.$emit('update:value', value_arr.join(','));
      this.$emit('change', value_arr.join(','));
    },
    onclick_all(){
      let arr=[];
      let value_arr = this.value_arr();
      s94Mjs.eachloop([this.row], 'children', function(v){
        // if (v.children && v.children.length) return true;
        let val = s94Mjs.to_string(v.value);
        if (val) arr.push(val);
        return true;
      })
      if (this.allon==1){
        arr.forEach(function(v){
          let index = value_arr.indexOf(v);
          value_arr.splice(index ,1);
        })
      }else {
        arr.forEach(function(v){
          if (!~value_arr.indexOf(v)) value_arr.push(v);
        })
      }
      this.$emit('update:value', value_arr.join(','));
      this.$emit('change', value_arr.join(','));
    },
    change_expand(){
      this.row.expand = !this.row.expand;
      if (!this.row.expand) {
        s94Mjs.eachloop(this.row.children, 'children', function(v){
          if (v.children && v.children.length) v.expand = false;
          return true;
        })
      }
    },
  },
  computed: {
    allon: function(){
      let res, last_on;
      let value_arr = this.value_arr();
      s94Mjs.eachloop(this.row.children, 'children', function(v){
        if (v.children && v.children.length) return true;
        let on = !!~value_arr.indexOf(v.value+'');
        if (on === last_on) return true;
        if (typeof(last_on) != 'undefined') {
          res = 2;
          return false;
        }
        last_on = on;
        res = on ? 1 : 0;
        return true;
      })
      return res;
    }
  }
}
</script>
<style scoped>
.checkbox-group{padding-left: 36px;border-left: 01px double var(--sm_bg);}
</style>